<script setup>
import {onMounted, ref} from 'vue'
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NTabPane,
  NTabs,
  NImage,
  NUpload,
  useMessage,
  NLayout,
  NLayoutContent, NSelect
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import CommonPage from '@/components/page/CommonPage.vue'
import { useUserStore } from '@/store'
import api from '@/api'
import {getToken, is, renderIcon} from '~/src/utils'
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
const { t } = useI18n()
const userStore = useUserStore()
const isLoading = ref(false)
const base_path = import.meta.env.VITE_BASE
const message = useMessage()


const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '客户',
  initForm: {},
  doCreate: api.createCustomer,
  doDelete: api.deleteCustomer,
  doUpdate: api.updateCustomer,
  refresh: () => $table.value?.handlerefresh(),
})

const data = reactive({
  uploadAction: base_path+'/system/base/userimg',
  token: getToken(),
  show:false,
  my_arrive:[],
  my_arrive2:[],
  my_arrive3:[],
  customer_list:[],
  online:1,
  keyword:"",
  loading:false,
  card_loading:false,
  select_id:"",
  select_customer:{
    draw:false,
    name:"未选择",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    totals:{
      weimei:0,
      cdp:0,
      fujia:0,
      other:0,
      buy_money:0,
      cases:0,
      appoint_count:0,
      return_count:0
    }
  },
  hkqdData:[
    {id:"小红书",name:"小红书"},
      {id:"转介绍",name:"转介绍"},
      {id:"员工",name:"员工"},
      {id:"其他",name:"其他"},
  ]
});

onMounted(() => {
 select_tab("chap1")
})

function get_customers(){
  api.appointmentV2({
    type: 0,
    keyword: data.keyword
  }).then((res) => {
    data.my_arrive = res.data.items
  })

  api.get_my_arrive({
    all: 1,
  }).then((res) => {
    data.my_arrive2 = res.data.items
  })

  api.get_my_arrive({
    type: 0,
    keyword: data.keyword
  }).then((res) => {
    data.my_arrive3 = res.data.items
  })
}

function select_tab(type){
  if(type==="chap1"){
    data.online=1
    data.keyword=""
  }else{
    data.online=null
  }
  get_customers()
}

function on_operateDoing(item) {
  api.operateDoing({
    id: item.id,
  }).then((res) => {
    message.success('开始接待客户')
    on_ref()
  })
}

function on_operateDone(item){
  api.operateDone({
    id: item.id,
  }).then((res) => {
    message.success('接待客户完成')
    on_ref()
  })
}

</script>

<template>

<AppPage :show-footer="false" >
    <n-grid x-gap="12" :cols="1" style="height: 100%" >
    <n-gi>
      <n-card style="height: 100%" title="接待工作台" size="small"  :segmented="{content: true,footer: 'soft',}">
        <n-tabs type="segment" animated :on-update:value="select_tab">
          <n-tab-pane name="chap1" tab="待处理">
            <n-scrollbar style="max-height: calc(100vh - 250px);padding:0">
              <n-grid x-gap="12"  :cols="3"  >

           <n-gi v-for="item in data.my_arrive" >
            <n-card embedded  class="customer_card"  hover:card-shadow   size="small" :segmented="{content: true,footer: 'soft',}">
              <template #header>
                <div style="display: flex; align-items: center;" >
                  <NAvatar :src="item.avatar"  style="width: 40px; height: 40px; margin-right: 10px;border-radius: 50%" />
                  <div style="line-height: 20px">
                    <div>{{item.username}}&nbsp;{{item.mobile}}</div>
                    <div style="font-size: 14px;font-weight: normal;margin-top: 3px">
                      No.&nbsp;{{item.card_number}}

                    </div>
                  </div>
                </div>
              </template>
              <template #header-extra>
<!--                <NTag type="error" v-if="item.user_id===data.select_id">已选择</NTag>&nbsp;-->
<!--                <NTag type="primary">{{item.user_level_name}}</NTag>-->
                <NTag type="primary">{{item.user_level_name}}</NTag>
<!--                <NTag type="primary">{{item.category_id}}</NTag>-->

              </template>
              <template #footer>
                <span color="#ef504e"></span>
<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div>电话: <span>{{item.mobile}}</span></div>-->
<!--                  <div>顾问: <span>{{item.shouli_uid}}</span> </div>-->
<!--                </n-flex>-->

<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div>当次开发: <span>{{item.dckf_uid}}</span> </div>-->
<!--                  <div>当次受理: <span>{{item.shouli_uid}}</span> </div>-->
<!--                </n-flex>-->
                <n-flex justify="space-between" size="large">

                  <n-alert :bordered="false" type="success"   style="width: 100%;margin-top: 5px;height:50px;">
                    <n-marquee>
                      <div style="margin-right: 64px">
                        {{item.caters_remark}}
                      </div>
                    </n-marquee>
                  </n-alert>
                </n-flex>
                <n-flex justify="space-between" size="large">
                  <div> </div>
                   <div style="margin-top: 5px"><NButton  type="primary" size="small"   @click="on_operateDoing(item)">处理</NButton></div>

                </n-flex>
              </template>
            </n-card>
           </n-gi>
           </n-grid>
            </n-scrollbar>
          </n-tab-pane>
          <n-tab-pane name="chap2" tab="进行中">
            <n-scrollbar style="max-height: calc(100vh - 250px);padding:0">
              <n-grid x-gap="12"  :cols="3"  >

           <n-gi v-for="item in data.my_arrive3" >
            <n-card embedded  class="customer_card"  hover:card-shadow   size="small" :segmented="{content: true,footer: 'soft',}">
              <template #header>
                <div style="display: flex; align-items: center;" >
                  <NAvatar :src="item.avatar"  style="width: 40px; height: 40px; margin-right: 10px;border-radius: 50%" />
                  <div style="line-height: 20px">
                    <div>{{item.name}}&nbsp;{{item.mobile}}</div>
                    <div style="font-size: 14px;font-weight: normal;margin-top: 3px">
                      No.&nbsp;{{item.card_number}}

                    </div>
                  </div>
                </div>
              </template>
              <template #header-extra>
<!--                <NTag type="error" v-if="item.user_id===data.select_id">已选择</NTag>&nbsp;-->
<!--                <NTag type="primary">{{item.user_level_name}}</NTag>-->
                <NTag type="primary">{{item.user_level_name}}</NTag>
<!--                <NTag type="primary">{{item.category_id}}</NTag>-->

              </template>
              <template #footer>
                <span color="#ef504e"></span>
<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div>电话: <span>{{item.mobile}}</span></div>-->
<!--                  <div>顾问: <span>{{item.shouli_uid}}</span> </div>-->
<!--                </n-flex>-->

<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div>当次开发: <span>{{item.dckf_uid}}</span> </div>-->
<!--                  <div>当次受理: <span>{{item.shouli_uid}}</span> </div>-->
<!--                </n-flex>-->
                <n-flex justify="space-between" size="large">

                  <n-alert :bordered="false" type="success"   style="width: 100%;margin-top: 5px;height:50px;">
                    <n-marquee>
                      <div style="margin-right: 64px">
                        {{item.ac_remark}}
                      </div>
                    </n-marquee>
                  </n-alert>
                </n-flex>
                <n-flex justify="space-between" size="large">
                  <div> </div>
                   <div style="margin-top: 5px"><NButton  type="primary" size="small"   @click="on_operateDone(item)">处理</NButton></div>

                </n-flex>
              </template>
            </n-card>
           </n-gi>
           </n-grid>
            </n-scrollbar>
          </n-tab-pane>
          <n-tab-pane name="chap3" tab="今日已接待">
            <n-scrollbar style="max-height: calc(100vh - 250px);padding:0">
              <n-grid x-gap="12"  :cols="3"  >

           <n-gi v-for="item in data.my_arrive2" >
            <n-card embedded  class="customer_card"  hover:card-shadow   size="small" :segmented="{content: true,footer: 'soft',}">
              <template #header>
                <div style="display: flex; align-items: center;" >
                  <NAvatar :src="item.avatar"  style="width: 40px; height: 40px; margin-right: 10px;border-radius: 50%" />
                  <div style="line-height: 20px">
                    <div>{{item.name}}&nbsp;{{item.mobile}}</div>
                    <div style="font-size: 14px;font-weight: normal;margin-top: 3px">
                      No.&nbsp;{{item.card_number}}

                    </div>
                  </div>
                </div>
              </template>
              <template #header-extra>
<!--                <NTag type="error" v-if="item.user_id===data.select_id">已选择</NTag>&nbsp;-->
<!--                <NTag type="primary">{{item.user_level_name}}</NTag>-->
                <NTag type="primary">{{item.user_level_name}}</NTag>
<!--                <NTag type="primary">{{item.category_id}}</NTag>-->

              </template>
              <template #footer>
                <span color="#ef504e"></span>
<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div>电话: <span>{{item.mobile}}</span></div>-->
<!--                  <div>顾问: <span>{{item.shouli_uid}}</span> </div>-->
<!--                </n-flex>-->

<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div>当次开发: <span>{{item.dckf_uid}}</span> </div>-->
<!--                  <div>当次受理: <span>{{item.shouli_uid}}</span> </div>-->
<!--                </n-flex>-->
                <n-flex justify="space-between" size="large">

                  <n-alert :bordered="false" type="success"   style="width: 100%;margin-top: 5px;height:50px;">
                    <n-marquee>
                      <div style="margin-right: 64px">
                        {{item.ac_remark}}
                      </div>
                    </n-marquee>
                  </n-alert>
                </n-flex>
<!--                <n-flex justify="space-between" size="large">-->
<!--                  <div> </div>-->
<!--                   <div style="margin-top: 5px"><NButton  type="primary" size="small"   @click="on_operateDone(item)">处理</NButton></div>-->

<!--                </n-flex>-->
              </template>
            </n-card>
           </n-gi>
           </n-grid>
            </n-scrollbar>
          </n-tab-pane>

        </n-tabs>
      </n-card>
    </n-gi>

  </n-grid>


</AppPage>
</template>

<style scoped>
.customer_card{
  margin: 10px 0;
}
</style>